<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
    />
    <title>VibeTunnel - System Logs</title>
    <meta name="description" content="View and manage VibeTunnel system logs" />

    <!-- Mobile optimizations -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="theme-color" content="#1e1e1e" />

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />

    <!-- Styles -->
    <link href="/bundle/styles.css" rel="stylesheet" />

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }

      log-viewer {
        display: block;
        width: 100vw;
        height: 100vh;
      }
    </style>
    
    <!-- Initialize theme immediately to prevent flash -->
    <script>
      (function() {
        // Load saved theme preference or use system preference
        const saved = localStorage.getItem('vibetunnel-theme');
        const theme = saved || 'system';
        
        // Apply theme immediately
        if (theme === 'system') {
          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
          document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
        } else {
          document.documentElement.setAttribute('data-theme', theme);
        }
        
        // Apply immediate background to prevent flash
        const effectiveTheme = theme === 'system' 
          ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
          : theme;
        
        // Set initial background color
        document.documentElement.style.backgroundColor = effectiveTheme === 'dark' ? '#0a0a0a' : '#fafafa';
      })();
    </script>
  </head>
  <body class="m-0 p-0 bg-bg text-text">
    <log-viewer></log-viewer>

    <script type="module" src="/bundle/client-bundle.js"></script>
  </body>
</html>
